import { ref, onMounted, onBeforeUnmount } from 'vue'

/**
 * DOM 工具函数库
 * 提供常用的 DOM 操作和查询功能
 */
export function useDomUtils() {
  // 当前高亮的元素
  const highlightedElement = ref(null)
  // 高亮样式类名
  const highlightClass = 'dom-highlight'
  // 高亮颜色
  const highlightColor = ref('#ff1f71')

  /**
   * 高亮指定元素
   * @param {HTMLElement} element - 要高亮的元素
   * @param {boolean} isPermanent - 是否永久高亮
   */
  const highlightElement = (element, isPermanent = false) => {
    if (!element) return

    // 移除之前的高亮
    if (highlightedElement.value) {
      unhighlightElement(highlightedElement.value)
    }

    // 添加高亮样式
    element.classList.add(highlightClass)
    element.style.setProperty('--highlight-color', highlightColor.value)

    // 如果是永久高亮，则标记
    if (isPermanent) {
      element.dataset.highlightPermanent = 'true'
    }

    highlightedElement.value = element

    // 滚动到元素位置
    element.scrollIntoView({ behavior: 'smooth', block: 'center' })
  }

  /**
   * 移除元素高亮
   * @param {HTMLElement} element - 要移除高亮的元素
   */
  const unhighlightElement = (element) => {
    if (!element) return

    // 如果不是永久高亮，则移除
    if (!element.dataset.highlightPermanent) {
      element.classList.remove(highlightClass)
    }

    if (highlightedElement.value === element) {
      highlightedElement.value = null
    }
  }

  /**
   * 移除所有高亮
   */
  const unhighlightAll = () => {
    const elements = document.querySelectorAll(`.${highlightClass}`)
    elements.forEach(el => {
      el.classList.remove(highlightClass)
      delete el.dataset.highlightPermanent
    })
    highlightedElement.value = null
  }

  /**
   * 通过文本查找元素
   * @param {string} text - 要查找的文本
   * @param {number} [level=1] - 查找层级
   * @returns {HTMLElement[]} 匹配的元素数组
   */
  const findElementsByText = (text, level = 1) => {
    if (!text) return []

    const walker = document.createTreeWalker(
        document.body,
        NodeFilter.SHOW_TEXT,
        null,
        false
    )

    const elements = []
    const regex = new RegExp(text, 'i')

    while (walker.nextNode()) {
      const node = walker.currentNode
      if (regex.test(node.textContent)) {
        let target = node
        for (let i = 0; i < level; i++) {
          target = target.parentElement
          if (!target) break
        }
        if (target && !elements.includes(target)) {
          elements.push(target)
        }
      }
    }

    return elements
  }

  /**
   * 通过选择器查找元素
   * @param {string} selector - CSS 选择器
   * @returns {HTMLElement[]} 匹配的元素数组
   */
  const findElementsBySelector = (selector) => {
    if (!selector) return []
    return Array.from(document.querySelectorAll(selector))
  }

  /**
   * 获取元素的 DOM 路径
   * @param {HTMLElement} element - 目标元素
   * @returns {string} 元素的 DOM 路径
   */
  const getElementPath = (element) => {
    if (!element || !element.tagName) return ''

    const path = []
    let current = element

    while (current && current.tagName && current.tagName.toLowerCase() !== 'html') {
      let selector = current.tagName.toLowerCase()

      if (current.id) {
        selector += `#${current.id}`
        path.unshift(selector)
        break
      } else {
        let sibling = current
        let nth = 1

        while (sibling.previousElementSibling) {
          sibling = sibling.previousElementSibling
          nth++
        }

        if (current.className) {
          selector += `.${current.className.split(' ').join('.')}`
        }

        selector += `:nth-child(${nth})`
        path.unshift(selector)
      }

      current = current.parentNode
    }

    return path.join(' > ')
  }

  /**
   * 检查元素是否可见
   * @param {HTMLElement} element - 要检查的元素
   * @returns {boolean} 是否可见
   */
  const isElementVisible = (element) => {
    if (!element) return false

    // 检查样式可见性
    const style = window.getComputedStyle(element)
    if (style.display === 'none' || style.visibility === 'hidden') {
      return false
    }

    // 检查尺寸
    if (element.offsetWidth === 0 && element.offsetHeight === 0) {
      return false
    }

    // 检查是否在视口中
    const rect = element.getBoundingClientRect()
    return (
        rect.top < window.innerHeight &&
        rect.bottom > 0 &&
        rect.left < window.innerWidth &&
        rect.right > 0
    )
  }

  /**
   * 复制文本到剪贴板
   * @param {string} text - 要复制的文本
   */
  const copyToClipboard = (text) => {
    if (!text) return

    // 优先使用 Clipboard API
    if (navigator.clipboard) {
      navigator.clipboard.writeText(text)
          .catch(() => fallbackCopy(text))
      return
    }

    // 降级方案
    fallbackCopy(text)
  }

  // 降级复制方案
  const fallbackCopy = (text) => {
    const textarea = document.createElement('textarea')
    textarea.value = text
    document.body.appendChild(textarea)
    textarea.select()

    try {
      document.execCommand('copy')
    } catch (err) {
      console.error('复制失败:', err)
    }

    document.body.removeChild(textarea)
  }

  /**
   * 解除页面复制限制
   */
  const enableCopy = () => {
    // 1. 允许文本选择
    document.body.style.userSelect = 'auto'
    document.body.style.webkitUserSelect = 'auto'

    // 2. 移除右键菜单拦截
    document.oncontextmenu = null
    document.addEventListener('contextmenu', e => {
      e.stopPropagation()
    }, true)

    // 3. 解除复制/剪切拦截
    document.oncopy = null
    document.oncut = null
    document.addEventListener('copy', e => {
      e.stopImmediatePropagation()
    }, true)

    // 4. 解除快捷键禁用
    document.onkeydown = null
    document.addEventListener('keydown', e => {
      e.stopPropagation()
    }, true)

    // 5. 删除覆盖的透明层
    const overlays = document.querySelectorAll('div')
    overlays.forEach(div => {
      if (div.style.position === 'absolute' && div.style.zIndex === '999') {
        div.remove()
      }
    })

    // 6. 强制启用选择
    document.querySelectorAll('*').forEach(element => {
      element.style.userSelect = 'auto !important'
    })
  }

  // 添加全局样式
  onMounted(() => {
    const style = document.createElement('style')
    style.textContent = `
      .${highlightClass} {
        outline: 2px solid var(--highlight-color) !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 10px var(--highlight-color) !important;
        animation: highlight-pulse 1s infinite;
      }
      
      @keyframes highlight-pulse {
        0% { box-shadow: 0 0 5px var(--highlight-color); }
        50% { box-shadow: 0 0 20px var(--highlight-color); }
        100% { box-shadow: 0 0 5px var(--highlight-color); }
      }
    `
    document.head.appendChild(style)
  })

  // 清理
  onBeforeUnmount(() => {
    unhighlightAll()
  })

  return {
    highlightedElement,
    highlightColor,
    highlightElement,
    unhighlightElement,
    unhighlightAll,
    findElementsByText,
    findElementsBySelector,
    getElementPath,
    isElementVisible,
    copyToClipboard,
    enableCopy
  }
}
